/***********************效果***********************/
.shadow {
  --SHc: rgba(0, 0, 0, 0.2);
  filter: drop-shadow(var(--SHc) 3rem 3rem 12rem);
}
//点击效果
.active {
  cursor: pointer;
  &:active {
    filter: brightness(90%) invert(0.3);
  }
}
.hover-line-B {
  --line-W: 1rem;
  position: relative;
  cursor: pointer;
  &::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    width: 0;
    bottom: calc(0rem - var(--gap-xxs));
    height: var(--line-W);
    background: var(--C-M1);
    border-radius: var(--R-max);
    transition: width 0.3s ease-in-out;
  }
  &:hover {
    &:before {
      width: 100%;
    }
  }
}

.hover-line-L {
  --line-W: 2rem;
  position: relative;
  cursor: pointer;
  &::before {
    content: "";
    position: absolute;
    left: calc(0rem - var(--gap-sm));
    width: var(--line-W);
    height: 0;
    background: var(--C-M1);
    border-radius: var(--R-max);
    transition: height 0.3s ease-in-out;
  }
  &:hover {
    &:before {
      height: 100%;
    }
  }
}

.border-B {
  --BOc: var(--C-T1-O1);
  border-bottom: solid 1rem var(--BOc);
}
.border-T {
  --BOc: var(--C-T1-O1);
  border-top: solid 1rem var(--BOc);
}
.border-all {
  --BOc: var(--C-T1-O1);
  border: solid 1rem var(--BOc);
}
.bg-img {
  background-image: var(--bg-img);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
}
